<template>
  <div class="hm-footer">
    <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count">
        剩余
        <strong>{{ count }}</strong>
      </span>
      <ul class="filters">
        <li>
          <a class="selected" href="#/">全部</a>
        </li>
        <li>
          <a href="#/active">进行中</a>
        </li>
        <li>
          <a href="#/completed">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" v-show="isShowChange" @click="clear">
        清除已完成
      </button>
    </footer>
  </div>
</template>

<script>
export default {
  name: "HmFooter",
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  // 计算属性
  computed: {
    // 计算剩余
    count() {
      return this.list.filter((item) => item.flag === false).length;
    },
    // 判断是否还有内容
    isShowChange() {
      // 如果数据有一个是已完成，就会显示清除按钮。全部未完成则会隐藏
      return this.list.some((item) => item.flag === true);
    },
    // 清除已完成
  },
  methods: {
    clear() {
      this.$emit("clear");
    },
  },
};
</script>

<style></style>
